<template>
	<view class="container shopCar-container">
		<view class="goods-list" v-for="item in pageFormData" :key="item.id">
			<view class="shop-name">{{item.placeMerchant}}</view>
			<view class="goods-info">
				<view class="sel-type iconfont c-success" v-if="item.isSel" @click="clickSel(item)">&#xe63b;</view>
				<view class="sel-type iconfont " v-else @click="clickSel(item)">&#xe640;</view>
				<image class="goods-img" :src="item.picUrl" mode="aspectFill"></image>
				<view style="flex-grow: 1;">
					<view class="goods-name">{{item.goodsName}}</view>
					<view class="goods-pricebox">
						<text class="goods-price">¥{{$toYuan(item.addPrice)}}</text>
						<text class="goods-size">{{item.spuName}}</text>
					</view>
					<view class="goods-numbox">
						<text class="iconfont" @click="clickMinus(item.id)">&#xe711;</text>
						<input class="goods-num" type="number" v-model="pageFormData[item.id].number" disabled>
						<text class="iconfont" @click="clickAdd(item.id)">&#xe607;</text>
					</view>
				</view>
			</view>
		</view>
		<view class="not-more" v-if="isLoading">加载中...</view>
		<view class="null-page" v-else-if="goodsList.length<=0 ">
			<text class="iconfont">&#xe642;</text>
			<view class="null-page-tips">暂无数据~</view>
		</view>
		<view class="not-more" v-else>没有更多了...</view>

		<view class="page-bottom">
			<!-- <view style="margin-right: 20rpx;display: flex;align-items: center;" @click="clickAll()">
				<text class="sel-type iconfont c-success" v-if="selectAll">&#xe63b;</text>
				<text class="sel-type iconfont" v-else>&#xe640;</text>
				<text style="font-size: 28rpx;">全选</text>
			</view> -->
			<view style="margin-right: 20rpx;display: flex;align-items: center;" @click="clickClean()">
				<text style="font-size: 28rpx;">清空</text>
			</view>

			<view class="count-info">
				<view style="display: flex;align-items: center;">
					<text style="margin-right: 20rpx;">共{{pageData.countNum}}件</text>
					<text>合计:</text>
					<text style="color: #FF4F00;font-size: 24rpx;margin-left: 30rpx;">¥</text>
					<text class="total-price">{{$toYuan(pageData.totalPrice)}}</text>

				</view>
				<!-- <view>抵扣：<text style="color: #FF4F00;">¥200.00</text></view> -->
			</view>

			<view style="flex-grow: 1;"></view>
			<view class="yuan-btn btn-success" @click="clickPay()">立即购买</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from "vue";
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import commonStore from '@/store/commonStore';
	import { hideLoading, showLoading, showToast } from '@/common/util';
	import api from '@/common/api';
	let goodsList = ref([])
	const pageFormData = ref<any>({})
	const pageData = ref({
		totalPrice: 0,
		countNum: 0
	})
	onShow(async () => {
		if (commonStore.state.reload.indexOf('carIndex') >= 0) {
			await getGoodsList()
			getPageData()
			commonStore.commit('delReload', 'carIndex')

		}

	})
	let selStore=''
	const selectAll = ref(false)
	const getPageData = () => {
		let totalPrice = 0
		let countNum = 0
		selectAll.value = true
		const formData = pageFormData.value
		selStore=''
		for (let key in formData) {
			if (formData[key].isSel) {
				const item = formData[key]
				totalPrice += item.addPrice * item.number
				countNum += item.number
				selStore=item.storeId
			} else {
				selectAll.value = false
			}
		}
		pageData.value = { totalPrice, countNum }
	}
	const clickMinus = (id) => {
		const formData = pageFormData.value
		if (formData[id].number === 1) {
			uni.showModal({
				title: '提示',
				content: '你确定要移除该商品吗？',
				confirmText: '确定',
				success: async (res) => {
					if (res.confirm) {
						showLoading()
						//移除商品
						await api.removeShoppingCart(id)
						//请求接口 
						delete formData[id]
						hideLoading()
						getPageData()
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return
		}
		formData[id].number = formData[id].number - 1
		pageFormData.value = formData
		getPageData()
	}
	const clickAdd = (id) => {
		const formData = pageFormData.value
		formData[id].number = formData[id].number + 1
		pageFormData.value = formData
		getPageData()
	}
	
	const clickSel = (item) => {
		
		const id=item.id
		const formData = pageFormData.value
		if(selStore){
			if(selStore!==formData[id].storeId){
				showToast('只能选择同一商家商品进行结算')
				return
			}
		}
		formData[id].isSel = !formData[id].isSel
		pageFormData.value = formData
		getPageData()
	}
	const clickClean=()=>{
		const formData = pageFormData.value
		for (let key in formData) {
			formData[key].isSel = false
		}
		pageFormData.value = formData
		getPageData()
	}
	const clickAll = () => {
		const formData = pageFormData.value
		if (selectAll.value) {
			for (let key in formData) {
				formData[key].isSel = false
			}
		} else {
			for (let key in formData) {
				formData[key].isSel = true
			}
		}
		pageFormData.value = formData
		getPageData()
	}
	const jump = (url) => {
		uni.navigateTo({
			url
		})
	}
	const isLoading = ref(false)
	const getGoodsList = async () => {
		showLoading()
		isLoading.value = true

		try {
			const res = await api.findShoppingCart({})
			let formData = {}
			res.data.forEach(item => {
				formData[item.id] = { ...item, number: 1, isSel: false }
			})
			
			pageFormData.value = formData
			goodsList.value = res.data
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const clickPay = () => {
		// 把选择的商品放入store
		const formData = pageFormData.value
		const data = []
		for (let key in formData) {
			if (formData[key].isSel) {
				data.push(formData[key])
			}
		}

		if (data.length === 0) {
			showToast('请至少选择一个商品')
			return
		}
		commonStore.commit('setPayGoodsData', data)
		jump('/pages/category/goodsPay')
	}
</script>

<style lang="scss">
	.shopCar-container {
		padding: 20rpx;

		.goods-list {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
		}

		.shop-name {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 15rpx;
		}

		.goods-info {
			display: flex;
			align-items: center;
		}

		.sel-type {
			color: #999;
			font-size: 40rpx;
			padding: 20rpx 20rpx 20rpx 0;
		}

		.goods-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}

		.goods-name {
			font-size: 32rpx;
			color: #333;
		}

		.goods-pricebox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.goods-price {
			font-size: 34rpx;
			color: #FF4F00;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.goods-size {
			font-size: 24rpx;
			color: #666;
		}

		.goods-numbox {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 28rpx;
				color: #333;
				padding: 10rpx;
			}
		}

		.goods-num {
			width: 100rpx;
			border: solid 1px #eee;
			border-radius: 4rpx;
			padding: 5rpx 10rpx;
			text-align: center;
			margin: 0 10rpx;
			font-size: 28rpx;
		}


		.page-bottom {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.total-price {
				color: #FF4F00;
				font-size: 40rpx;
				font-weight: bold;
				margin-right: 25rpx;
				margin-left: 5rpx;
			}

			.count-info {
				font-size: 28rpx;
				color: #666;
			}

			.yuan-btn {
				height: 70rpx;
				width: 160rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}

			.sel-type {
				padding-right: 10rpx;
			}
		}
	}
</style>